<template>
  <div id="">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>

    <el-row>
      <el-col :span="6">
        <el-form label-width="120px">
          <el-form-item label="姓名" style="text-align: left;">
            <el-input placeholder="请输入姓名" size="medium"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" size="medium"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10">
        <el-form >
          <el-form-item>
            <el-button icon="el-icon-search" type="success" size="medium">查询</el-button>
            <el-button icon="el-icon-zoom-in" type="success" size="medium" @click="addStu()">新增</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <template>
      <!-- :data 绑定的数据 -->
      <el-table :data="list" border style="width: 100%">
        <!-- label: 列名称 -->
        <el-table-column label="编号" width="50">
          <template slot-scope="x">
            <span style="text-align: right;">{{x.row.stuId}}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" width="120">
          <template slot-scope="x">
            <span>{{x.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="年龄" width="70">
          <template slot-scope="x">
            <span>{{x.row.age}}</span>
          </template>
        </el-table-column>

        <el-table-column label="性别" width="80">
          <template slot-scope="x">
            <span>{{x.row.sex}}</span>
          </template>
        </el-table-column>

        <el-table-column label="籍贯" width="70">
          <template slot-scope="x">
            <span>{{x.row.province}}</span>
          </template>
        </el-table-column>

        <el-table-column label="爱好" width="150">
          <template slot-scope="x">
            <span>{{x.row.aihao}}</span>
          </template>
        </el-table-column>

        <el-table-column label="生日" width="150">
          <template slot-scope="x">
            <span>{{x.row.birthday}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="x">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(x.$index,x.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(x.row)">删除</el-button>
          </template>
        </el-table-column>



      </el-table>
    </template>
    <el-row>
      <el-col :span="8">
        <div class="block">
          <!-- @size-change 下拉框选择的事件 -->
          <!-- @current-change 选择当前页的事件 -->
          <!-- current-page 当前页 -->
          <!-- page-sizes 每页显示选择 -->
          <!-- page-size 每页显示 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="studentPage.page"
              :page-sizes="[2, 3, 5]"
              :page-size="studentPage.row"
              layout="total, sizes, prev, pager, next, jumper"
              :total="studentPage.total">
            </el-pagination>
          </div>
      </el-col>
    </el-row>
      <!-- 编辑对话框 -->
      <el-dialog :title="title" :visible="isShow" width="30%" :before-close="closeWin" >
        <el-form label-width="110px">
          <input type="hidden" v-model="student.id" />

          <el-form-item label="姓名">
            <el-col :span="18">
              <el-input v-model="student.name"></el-input>
            </el-col>

          </el-form-item>

          <el-form-item label="年龄">
            <el-col :span="18">
              <el-input v-model="student.age"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-col :span="18">
              <template>
                <el-radio v-model="student.sex" label="男">男</el-radio>
                <el-radio v-model="student.sex" label="女">女</el-radio>
              </template>
            </el-col>
          </el-form-item >

          <el-form-item label="籍贯">
            <el-col :span="18">
              <template>
                <el-select v-model="student.province" clearable>
                  <el-option v-for="o in option"
                  :key="o.value"
                  :label="o.label"
                  :value="o.value"
                  >

                  </el-option>
                </el-select>
              </template>
            </el-col>
          </el-form-item>

          <el-form-item label="爱好">
            <el-col :span="23">
              <el-checkbox-group v-model="student.hobby">
                <el-checkbox label="听音乐"></el-checkbox>
                <el-checkbox label="看电影"></el-checkbox>
                <el-checkbox label="逛街"></el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>

          <el-form-item label="生日">
            <el-col :span="18">
              <el-date-picker
              v-model="student.birthday"
              type="date"
              placeholder="请选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>

          </el-form-item>

          <el-form-item>
            <el-col>
              <el-button type="success" icon="el-icon-check" @click="saveEdit">确定</el-button>
              <el-button type="success" icon="el-icon-close" @click="closeWin">取消</el-button>
            </el-col>
          </el-form-item>

        </el-form>
      </el-dialog>

  </div>

</template>

<script>
  // 导入工具类
  import myUtil from "../util/MyUtil.js"

  export default {
    name: "student",
    data() {
      return {
        isShow:false,
        option:[
          {label:"成都",value:"成都"},
          {label:"重庆",value:"重庆"},
          {label:"合肥",value:"合肥"}
        ],
        list: [],
        student:{
          stuId:"",
          name: "",
          age: "",
          sex: "女",
          province: "",
          hobby: ["看电影","听音乐"],
          birthday:"2000-10-01",
          comment: ""
        },
        currentPage4:1,
        title:"",
        studentPage:{
          page:1,
          row:2,
          total:0
        }
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      edit(index,x){ // 编辑
        var self = this;
        // console.log(index+":"+x);
        this.isShow = true;
        this.title = "修改";
        // console.log(this.isShow)
        // 数据回显
        this.student.stuId = x.stuId;
        this.student.name = x.name;
        this.student.age = x.age;
        this.student.sex = x.sex;
        this.student.province = x.province;
        this.student.hobby = x.aihao.split(", ");
        this.student.birthday = x.birthday;
      },
      del(){

      },
      closeWin(){
        this.isShow = false;
      },
      handleSizeChange(val){
        // 分页下拉触发
        this.studentPage.row = val;
        this.loadData();
      },
      handleCurrentChange(val){
        // 选择 第几页触发
        this.studentPage.page = val;
        this.loadData();
      },
      saveEdit(){
        this.isShow = false;
        var self = this;
        var url = "";
        if(self.title=="新增"){
          url = myUtil.url + "/stu/add";
        } else{
          url = myUtil.url + "/stu/update";
        }
        // console.log(self.student);
        $.ajax({
          url:url,
          tyep:"get",
          data:self.student,
          dataType:"json",
          success:function(rs){
            // console.log(rs);
            self.$message(rs.info);
            self.loadData();
          },
          error:function(rs){
            self.$alert(rs.responseText);
          }
        })
      },
      addStu(){
        this.isShow = true;
        this.student.name = "";
        this.student.age = null;
        this.student.sex = "";
        this.student.province = "";
        this.student.hobby = [];
        this.student.birthday = "";
        this.student.comment = "";
        this.title = "新增";
      },
      loadData(){
        var self = this;
        $.ajax({
          url: myUtil.url + "/stu/listGet",
          type:"get",
          data:self.studentPage,
          dataType:"json",
          success:function(rs){
            self.list = rs.list;
            // console.log("爱好=="+rs.list[0].aihao);
            self.studentPage.total = rs.total;
          },
          error:function(rs){
            // console.log(rs);
            self.$alert(rs.responseText);
          }
        })
      },
      del(x){
        var self = this;
        // console.log(x);
        this.$confirm("你确定要删除吗?").then(function(){
          $.ajax({
            url: myUtil.url + "/stu/del",
            tyep:"get",
            data:{
              "id": x.stuId
            },
            dataType:"json",
            success:function(rs){
              // console.log("爱好=="+rs.list[0].aihao);
              self.$message(rs.info);
              self.loadData();
            }
          })
        }).catch(function(){
          self.$message("选择取消");
        })
      }
    },
    mounted(){
      this.loadData();
    }
  }
</script>

<style>
</style>
